<template>
  <!--  <button @click="action" :aria-label="label" :title="label" class="action">-->
  <!--    <i class="material-icons">{{ icon }}</i>-->
  <!--    <span>{{ icon }}</span>-->
  <!--&lt;!&ndash;    <el-icon>&ndash;&gt;-->
  <!--&lt;!&ndash;      <Search />&ndash;&gt;-->
  <!--&lt;!&ndash;    </el-icon>&ndash;&gt;-->
  <!--    <span>{{ label }}</span>-->
  <!--    <span v-if="counter && counter > 0" class="counter">{{ counter }}</span>-->
  <!--  </button>-->

  <el-button @click="action" :icon="icon">{{ label }}</el-button>
</template>

<script setup lang="ts">
import { useLayoutStore } from "@/stores/layout";

const props = defineProps<{
  icon?: string;
  label?: string;
  counter?: number;
  show?: string;
}>();

const emit = defineEmits<{
  (e: "action"): any;
}>();



const layoutStore = useLayoutStore();

const action = () => {
  if (props.show) {
    layoutStore.showHover(props.show);
  }

  emit("action");
};
</script>
<style scoped>
:deep(.el-icon svg) {
  width: 20px;
  height: 20px;
}

:deep(.el-icon) {
  width: 20px;
  height: 20px;
}
</style>
